<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<link type="text/css" rel="stylesheet"
		href="#{request.contextPath}/css/default.css" />
</h:head>
<h:body>

<h:form id="form"> 

    <p:growl id="messages" showDetail="true"/>  
    <h:messages errorClass="error"/>
  
    <p:dataTable var="category" selection="#{categoryBean.selectedCategory}" selectionMode="single" rowKey="#{category.categoryId}" value="#{categoryBean.categoryList}"  
     id="categoryList" editable="true">  
  
        <f:facet name="header">  
            Category List  
        </f:facet>  
  
        <p:ajax event="rowEdit" listener="#{categoryBean.onEdit}" update=":form:messages" />  
<!--         <p:ajax event="rowEditCancel" listener="#{categoryBean.onCancel}" update=":form:messages" />   -->
        
  
        <p:column headerText="CategoryId" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{category.categoryId}" />  
                </f:facet>  
                <f:facet name="input">  
                    <p:inputText value="#{category.categoryId}" style="width:100%"/>  
                </f:facet>  
            </p:cellEditor>  
        </p:column>  
  
        <p:column headerText="categoryName" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{category.categoryName}" />  
                </f:facet>  
                <f:facet name="input">  
                    <p:inputText value="#{category.categoryName}" style="width:100%" label="Year"/>  
                </f:facet>  
            </p:cellEditor>  
        </p:column>  
  
        <p:column headerText="parentCategoryId" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{category.parentCategoryId}" />  
                </f:facet>  
                <f:facet name="input">  
                <p:inputText value="#{category.parentCategoryId}" style="width:100%" label="Year"/> 
                </f:facet>  
            </p:cellEditor>  
        </p:column>  
        
        <p:column headerText="displayOrder" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{category.displayOrder}" />  
                </f:facet>  
                <f:facet name="input">  
                <p:inputText value="#{category.displayOrder}" style="width:100%" label="Year"/> 
                </f:facet>  
            </p:cellEditor>  
        </p:column> 

  
        <p:column headerText="Options" style="width:50px">  
            <p:rowEditor />  
        </p:column>
        
        <f:facet name="footer">  
            <p:commandButton  id="addCategoryButton" value="Add" icon="ui-icon-add"  onclick="dlg.show()" /> 
            <p:commandButton id="deleteButton" value="Delete" icon="ui-icon-delete"  action="#{categoryBean.onDelete}"
                    update=":centerContentPanel" oncomplete="carDialog.show()"/> 
             
        </f:facet>   
  
    </p:dataTable>  
    
  </h:form>
    
    <p:dialog id="addDialog" header="Add Category" widgetVar="dlg">  
    <h:form>  
        <h:panelGrid columns="2" cellpadding="5">  
            <h:outputLabel for="categoryname" value="Category name:" />  
            <p:inputText value="#{categoryBean.newCategory.categoryName}"   
                    id="newCategoryname" required="true" label="categoryname" />  
              
            <h:outputLabel for="parentCategoryId" value="Parent categoryId:" />  
            <p:inputText value="#{categoryBean.newCategory.parentCategoryId}"   
                    id="newparentCategoryId" required="true" label="parentCategoryId" disable="true" readonly="true"/> 
                    
            <h:outputLabel for="displayOrder" value="Display Order:" />  
            <p:inputText value="#{categoryBean.newCategory.displayOrder}"   
                    id="newdisplayOrder" required="true" label="displayOrder" /> 
              
            <f:facet name="footer">  
                <p:commandButton id="addCategoryButton" value="Add" update=":form:categoryList"   
                    actionListener="#{categoryBean.addCategory}"   
                    oncomplete="handleLoginRequest(xhr, status, args)"/>  
            </f:facet>  
        </h:panelGrid>  
          
    </h:form>  
</p:dialog>  
  
<script type="text/javascript">  
    function handleLoginRequest(xhr, status, args) {  
//         if(args.validationFailed || !args.loggedIn) {  
//             jQuery('#addDialog').effect("shake", { times:3 }, 100);  
//         } else {  
            dlg.hide();  
//         }  
    }  
</script>
    
</h:body>
</html>